<template>
  <div id="app" v-bind:style="{backgroundColor: background, backgroundImage: 'url(' + background_image + ')' }">
    <div v-if="isShow"  style="position: relative;width: 100%">
      <img style="width: 100%;" src="https://www.hbxczxpt.com/file/2021-05-13/8c601a6721b040c99305458de30704c6.png"/>

      <img src="./assets/close.png" @click="close"
           style="z-index: 10;position: absolute;top: 0;background-color: black;right: 100px;width: 30px"/>
    </div>
    <div style="position: absolute;z-index: 1;overflow: hidden;width: 100%;" class="top-box">
      <img src="https://www.hbxczxpt.com/website/static/media/top-bg.ae4eab61.png" style="width: 100%;">
      <div class="bg_src"></div>
    </div>

    <div style="position: relative;z-index: 9999;">
      <router-view class="mainWdith"/>
      <Footer></Footer>
      <div ref=""></div>
      <FixedToolbar/>
    </div>

  </div>
</template>

<script>
import Footer from "./components/footer.vue"
import FixedToolbar from "./components/FixedToolbar.vue"
import {totalapi} from "./api/http";

export default {
  name: 'App',
  components: {
    Footer, FixedToolbar
  },
  data() {
    return {
      background: '',
      background_image: '',
      isShow: true
    }
  },
  async created() {
    await this.setSetting();
  },
  mounted() {

  },
  methods: {
    close() {
      this.isShow = false
    },
    async setSetting() {
      if (sessionStorage.getItem('total') === null) {
        const res1 = await totalapi()
        console.log(res1)
        if (res1.data.code === 200) {
          this.background_image = res1.data.data.mch_info.pc_background
          this.background = res1.data.data.mch_info.pc_background_color
          sessionStorage.setItem("total", JSON.stringify(res1.data.data))
        } else {
          this.$message(res1.data.msg)
        }
      } else {
        var total = JSON.parse(sessionStorage.getItem('total'))
        this.background_image = total.mch_info.pc_background
        this.background = total.mch_info.pc_background_color
      }
    }
  },
}
</script>

<style scoped lang="less">
@import url('~@/assets/style/var.less');

#app {
  background-image: url('~@/assets/center-bg.b32c4363.png');
  background-color: @bg-color;
  background-repeat: round;
  min-width: 100%;
  min-height: 100%;

  .top-box {
    width: @main-width;
    overflow: hidden;

  }


  .mainWdith {
    width: @main-width;
    margin: auto;
  }
}
</style>
